<!doctype html>
<html style="height:100%;margin:0;">
<head>
<meta charset="utf-8">
<title>竖屏分页</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no"/>
<script src="http://mat1.gtimg.com/www/mobi/js/zepto.min.js"></script>
<script src="../../dist/jmslip.js"></script>
<style>
#wrap {
	position: absolute;;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
</style>
</head>
<body style="margin:0;">
<div id="wrap">
<div style="width:100%;height:100%;">
	<div class="page page-1" style="background-color:blue;">
1
	</div>
	<div class="page page-2" style="background-color:green;">
	2
	</div>
	<div class="page page-3" style="background-color:red;">
	3
	</div>
	<div class="page page-4" style="background-color:#23A253">
		4
	</div>
	<div class="page page-4" style="background-color:yellow">
		5
	</div>
</div>
</div>
<script>
var slip = new jmSlip('wrap','page',{
			changeTime: 1000,
			loop: true,
			mousewheel:true, //支持滚轮
			onPageStart: function(page) {
				console.log(page);
			}, //翻页开始前回调，如果返回false则翻页中止
			onPageEnd: function(oldpage, newpage){
				console.log(oldpage);
				console.log(newpage);
			} ,//翻页结束回调
			onTouchStart: function(evt){
				console.log(evt);
			}, //滑动开始，返回false中止滑动
			onTouchMove: function(evt, offset){
				evt.preventDefault();
				console.log(evt);
				console.log(offset);//相对于start的位移
			}, //滑动中，返回false中止
			onTouchEnd: function(evt){
				console.log(evt);
			} //滑动结束，返回false中止
		});

$(window).resize(function(){

	slip.reset();
});
</script>
 <script type="text/javascript" src="http://tajs.qq.com/stats?sId=45761699" charset="UTF-8"></script>

</body>
</html>